<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="index.css">
    <!-- 引入组件库 -->
    <script src="index.js"></script>
    <link rel="stylesheet" href="common.css">


    <script src="common.js"></script>
    <title>Title</title>
    <style>

        .block{
            float: right;
            margin: 0  5% 10px  0 ;
        }
        #add{
            margin: 0 0  10px 5% ;
        }
        .footer{
            height: 100px;
        }

    </style>
</head>

<body>
    <div id="app">

        <el-menu
                default-active="1"
                class="leftNavBar el-menu-vertical-demo"
                text-color="#fff"
                active-text-color="#E6E6E6">
            <div class="title" style="margin-bottom: 10px">
                Market Management
            </div>
            <a href="/market/detail.html">
                <el-menu-item  index="1">
                    <i class="el-icon-menu"></i>
                    <span slot="title">库存管理</span>
                </el-menu-item>
            </a>
            <a href="/market/detail2.html">
                <el-menu-item index="2">
                    <i class="el-icon-menu"></i>
                    <span slot="title">商品管理</span>
                </el-menu-item>
            </a>
            <a href="/market/detail3.html">
                <el-menu-item  index="3">
                    <i class="el-icon-menu"></i>
                    <span slot="title">订单管理</span>
                </el-menu-item>
            </a>
            <a href="/market/detail4.html">
                <el-menu-item  index="4">
                    <i class="el-icon-menu"></i>
                    <span slot="title">入库订单</span>
                </el-menu-item>
            </a>
        </el-menu>
        <div class="right">
            <div class="top"><span></span>{{title}}<span style="margin-right: 5%">
                <el-popover
                        placement="top-start"
                        width="50"
                        trigger="hover"
                >
                    <div style="height:100%;text-align: center"><el-button onclick="logout()">登出</el-button></div>
                           <i slot="reference" class="el-icon-more"></i>
                        </el-popover>
            </span>
            </div>
            <el-alert
                    v-if="alertVisible"
                    :title="alertText"
                    :type="alertType"
                    show-icon>
            </el-alert>

<!--弹出框  采购-->
            <el-dialog type="text" title="添加订单" width="500px" :visible.sync="addFormVisible">
                <el-form :model="purchaseForm">
                    <el-form-item label="商品名" :label-width="formLabelWidth">
                        <el-input v-model="purchaseForm.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="数量" :label-width="formLabelWidth">
                        <el-input v-model="purchaseForm.num" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="类型" :label-width="formLabelWidth">
                        <el-input v-model="purchaseForm.type" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="过期日期" :label-width="formLabelWidth">
                        <el-date-picker
                                v-model="purchaseForm.expire"
                                type="date"
                                format="yyyy 年 MM 月 dd 日"
                                value-format="yyyy-MM-dd"
                                placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="addFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="purchase">确 定</el-button>
                </div>
            </el-dialog>
<!--弹出框——编辑-->
            <el-dialog type="text" title="编辑订单" width="500px" :visible.sync="editFormVisible">
                <el-form :model="editForm">
                    <el-form-item label="商品名" :label-width="formLabelWidth">
                        <el-input v-model="editForm.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="数量" :label-width="formLabelWidth">
                        <el-input v-model="editForm.total" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="类型" :label-width="formLabelWidth">
                        <el-input v-model="editForm.type" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="editFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="editStock">确 定</el-button>
                </div>
            </el-dialog>
<!-- 表单只要内容-->
            <template>
                <!--      按钮-->
                <el-button @click="addFormVisible = true"  id="add" size="small" type="primary">添加</el-button>
                <!--   日期选择器-->
<!--                <div class="block">-->
<!--                        <span class="demonstration"></span>-->
<!--                        <el-date-picker-->
<!--                                v-model="timevalue"-->
<!--                                type="daterange"-->
<!--                                align="right"-->
<!--                                unlink-panels-->
<!--                                size="small"-->
<!--                                range-separator="至"-->
<!--                                start-placeholder="开始日期"-->
<!--                                end-placeholder="结束日期"-->
<!--                                @change="load"-->
<!--                                :picker-options="pickerOptions">-->
<!--                        </el-date-picker>-->
<!--                    </div>-->

                <!-- 各个列-->
                <el-table
                        :data="tableData"
                        ref="filterTable"
                        style="width: 90%;margin: auto">

                    <el-table-column
                            prop="iid"
                            label="货物id"
                            width="150"
                            sortable>
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="货物名"
                            width="200">
                    </el-table-column>

                    <el-table-column
                            prop="total"
                            label="总数量"
                            width="150"
                            sortable>
                    </el-table-column>
                    <el-table-column
                            prop="onShelves"
                            label="上架状态"
                            width="100"
                            :filters="[{ text: '上架中', value: 1 }, { text: '下架', value: 0 }]"
                            :filter-method="filterTag"
                            filter-placement="bottom-end">
                        <template slot-scope="scope">
                            <el-tag
                                    :type="scope.row.onShelves === 0 ? 'primary' : 'success'"
                                    disable-transitions>{{scope.row.onShelves  === 0 ? '未上架':'已上架'}}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="expire"
                            label="过期日期"
                            width="250"
                            sortable
                            :filters="[{ text: '已过期', value: 1 }, { text: '未过期', value: 0 }]"
                            :filter-method="filterDate"
                    >
                    </el-table-column>
                    <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                <el-button
                                        size="mini"
                                        type="danger"
                                        @click="delTicket(scope.$index, scope.row)">删除</el-button>
                            </template>
                    </el-table-column>

                </el-table>
            </template>
            <div class="footer"></div>

        </div>


    </div>
</body>
<script>
    new Vue({

        el: '#app',

        data: function() {
            let that = this;
            return {

                tableData: [],
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);

                        }
                    }, {
                        text: '最近一个月',
                        //这里面的this值会改变，要用this的话要在上面赋值that
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }],

                    onPick(time){

                    }
                },
                editFormVisible:false,
                addFormVisible: false,
                alertType:'',
                alertVisible:false,
                alertText:"",
                purchaseForm:{
                    type:"",
                    expire:'',
                    num: '',
                    name:'',
                },
                editForm:{
                    type:"",
                    iid:'',
                    total: '',
                    name:'',
                },
                curRow : '',
                formLabelWidth: "100px",
                timevalue: [new Date() - 3600 * 1000 * 24 * 30,new Date() ],
                title: '库存管理'
            }
        },
        created(){
            this.load()
            check()
        },
        computed:{
        },
        methods:{
            load() {
                let self = this;
                myGet(baseUrl+'manager/scanStock',{'stime':this.timevalue[0].toLocaleString(),'etime':this.timevalue[1].toLocaleString(),"limit":99},function (response,status) {
                    if(response.result === true) {
                        self.tableData = response.data.detail;
                        console.log(response)
                    }
                })
            },
            purchase(){
                //在$post里面回调函数时,this将不再指代页面变量vue
                let self = this;
                console.log(this.purchaseForm);
                myPost(baseUrl+'manager/purchase',this.purchaseForm,function (response,status) {
                    if(response.result === true) {
                        showAlert(self,'success',response.msg);
                        console.log(response);
                        self.load()
                    }
                    else if(response.result === false){
                        showAlert(self,'error',response.msg);
                    }
                })
            },
            filterTag(value, row){
                console.log(row.onShelves);
                return (value>0) === (row.onShelves > 0)

            },
            filterDate(value, row) {
                if(value){
                    // 筛选已过期
                    console.log(new Date(row.expire.replace(/-/g, "/")));
                    console.log(new Date(row.expire.replace(/-/g, "/")) <= new Date());
                    return  (new Date(row.expire.replace(/-/g,"/")) <= new Date())
                }
                else {
                    return  (new Date(row.expire.replace(/-/g,"/")) >= new Date())
                }

            },
            handleEdit(index, row) {
                this.editForm = row;
                this.editFormVisible=true;
            },
            editStock(){

                let self = this;
                myPost(baseUrl+'Manager/changeStock',this.editForm,function (response,status) {
                    if(response.result === true) {
                        showAlert(self,'success',response.msg);
                        self.editFormVisible=false;
                        self.load()
                    }
                    else if(response.result === false){
                        showAlert(self,'error',response.msg);
                    }
                });

            },

            delTicket(index, row) {
                this.$confirm('此操作将永久删除该订单, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    console.log(index, row);
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },



            },




    })



</script>

</html>
